<template>
    <div class="register">
        <div class="container">
            <h1>注册</h1>
            <el-form :model="registerData" label-width="70px">
                <el-form-item label="账号" class="item">
                    <el-input v-model="registerData.userName" placeholder="请输入账号"  />
                </el-form-item>
                <el-form-item label="密码" class="item">
                    <el-input v-model="registerData.userPass" placeholder="请输入密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" class="item">
                    <el-input v-model="passwords" placeholder="再次输入密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="手机号" class="item">
                    <el-input v-model="registerData.iphone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="邮箱" class="item">
                    <el-input v-model="registerData.umail" placeholder="请输入QQ邮箱">
                        <template #append><el-button :disabled="disabledMail" @click="submitMail()" round>{{ umailLast }}</el-button></template>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码" class="item">
                    <el-input v-model="mailCode" placeholder="请输入验证码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitCode()">注册</el-button>
                    <el-button type="primary" @click="subLogin(0)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage  } from 'element-plus'
export default defineComponent({
    data(){
        return{
            registerData:{
                userName:'',
                userPass:'',
                iphone:'',
                umail:''
            },
            umailLast:'发送验证码',
            mailKey:'',
            mailCode:'',
            passwords:'',
            disabledMail:false
        }
    },
    setup() {
        // 配置路由
        const router = useRouter();
        // 配置vuex
        const store = useStore();
        // 配置代理
        const proxy = getCurrentInstance();

        return{
            router,
            store,
            proxy
        }
    },
    methods: {
        subLogin(time){
            let self = this;
            setTimeout(function(){
                self.router.push({
                    path:'/login'
                })
            },time)
        },
        submitMail(){
            let self = this;
            if(self.registerData.umail==''){
                ElMessage({
                    message:"请输入邮箱",
                    type:'warning'
                })
                return;
            }else if(self.registerData.umail.lastIndexOf("@qq.com")==-1){
                ElMessage({
                    message:"请使用QQ邮箱",
                    type:'error'
                })
                return;
            }
            let row = {
                toMain: self.registerData.umail
            }
            self.disabledMail = true;
            self.$http.post(`${self.baseUrl}/login/getRandomCode`,row).then(res=>{
                if(res.data){
                    ElMessage({
                        message:"邮箱发送成功,请等待1分钟",
                        type:'success'
                    })
                    self.mailKey = res.data.msg;
                 
                }else if(res.data.code==404){
                    ElMessage({
                        message:res.data.msg,
                        type:'error'
                    })
                }
            })
        },
        submitCode(){
            let self = this;
            if(self.mailCode==""){
                ElMessage({
                    message:"请输入验证码",
                    type:'warning'
                })
                return;
            }
            let row = {
                key:self.mailKey,
                code:self.mailCode
            }
            self.$http.post(`${self.baseUrl}/login/compareRandomCode`,row).then(res=>{
                if(res.data){
                    self.submitForm();
                }else{
                    ElMessage({
                        message:"验证码过期或输入错误",
                        type:'error'
                    })
                }
            })
        },
        submitForm(){
            let self = this;
            if(this.registerData.userPass != this.passwords){
                ElMessage({
                    message: '两次输入密码不一致',
                    type: 'warning',
                })
                return;
            }else if(this.registerData.userName=="" || this.registerData.userPass == ""){
                ElMessage({
                    message: '请完善信息',
                    type: 'warning',
                })
                return;
            }
            self.$http.post(`${self.baseUrl}/login/addLogin`,this.registerData).then(res=>{
                if(res.data!=0){
                    ElMessage({
                        message:"注册成功，2秒后跳转登录界面",
                        type:'success'
                    })
                    self.subLogin(2000);
                }else{
                    ElMessage({
                        message:"注册异常",
                        type:'error'
                    })
                }
            })
        }
    }
})
</script>
<style>
    .item .el-form-item__label{
        color: #ffffff;
    }
</style>
<style scoped>

    .el-form{
        width: 80%;
        margin: auto;
    }
    .register{
        width: 100%;
        height: 100%;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        background-image: url(../../assets/login.png);
        align-items: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: 66%;
    }
    .container{
        width: 400px;
        height: 430px;
        box-shadow: 1px 1px 20px 0px #7aa5be;
        border-radius: 10px;
        backdrop-filter: blur(2px);
    }
    .container h1{
        font-weight: 500;
        text-align: center;
        margin: 10px 0 20px 0;
        color: #ffffff;
    }
</style>